<template>
  <div class="container">
    <div class="top-title">
      近期项目
    </div>
    <div class="bg-cover">
      <div class="bg-div">
        <div class="content">
          <a-row class="item-row">
            <a-col span="5" class="title">日期</a-col>
            <a-col span="3" class="title">项目类型</a-col>
            <a-col span="16" :style="{textAlign: 'left'}" class="title">招标采购标题</a-col>
          </a-row>
          <a-list class="demo-loadmore-list" :loading="loading" itemLayout="horizontal" :dataSource="data">
            <div v-if="showLoadingMore" slot="loadMore"
                 :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
              <a-spin v-if="loadingMore"/>
              <a-button v-else @click="onLoadMore">加载更多</a-button>
            </div>

            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-row class="item-row">
                <a-col span="5">{{item.date}}</a-col>
                <a-col span="3">{{item.type}}</a-col>
                <a-col span="16" :style="{textAlign: 'left'}">{{item.title}}</a-col>
              </a-row>
            </a-list-item>
          </a-list>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import reqwest from "reqwest";

  const fakeDataUrl =
      "https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo";

  export default {
    data() {
      return {
        loading: true,
        loadingMore: false,
        showLoadingMore: true,
        data: [
        ],
        firstLoad:true
      };
    },
    mounted() {
      this.loading=false;

      this.data = [
        {
          date: "2019-10-13",
          type: "招标",
          title: "罗小黑战记衍生品全系列设计招标"
        },
        {
          date: "2019-10-13",
          type: "招标",
          title: "故宫里的大怪兽衍生品设计招标"
        },
        {
          date: "2019-10-13",
          type: "招标",
          title: "欧阳娜娜IP衍生品设计合作招标"
        },
        {
          date: "2019-10-13",
          type: "招标",
          title: "一川十二度衍生品设计合作招标"
        },
      ]
    },
    methods: {
      getData(callback) {
        reqwest({
          url: fakeDataUrl,
          type: "json",
          method: "get",
          contentType: "application/json",
          success: res => {
            callback(res);
          }
        });
      },
      onLoadMore() {
        this.loadingMore = true;

        //模拟拉取的数据
        if (this.firstLoad) {
          const result = [
            {
              date: "2019-10-13",
              type: "招标",
              title: "鬼灭之刃衍生品设计合作招标"
            },
            {
              date: "2019-10-13",
              type: "招标",
              title: "萌芽熊衍生品设计合作招标"
            },
            {
              date: "2019-10-13",
              type: "招标",
              title: "龙之谷衍生品设计合作招标"
            },
            {
              date: "2019-10-13",
              type: "招标",
              title: "王者荣耀衍生品设计合作招标"
            },
          ];
          this.data = this.data.concat(result);
          this.firstLoad = false;
        }

        this.loadingMore = false;

        this.$nextTick(() => {
          window.dispatchEvent(new Event("resize"));
        });

        //网络请求拉取数据
        // this.getData(res => {
        //   this.data = this.data.concat(result);
        //   this.loadingMore = false;
        //   this.$nextTick(() => {
        //     window.dispatchEvent(new Event("resize"));
        //   });
        // });
      }
    }
  };
</script>
<style scoped>
  .top-title {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
    color: #222222 !important;
    font-size: 30px;
    text-align: center;
    margin-bottom: 54px;
    padding-top: 80px;
  }

  .container {
    position: relative;
    width: 100%;
    background: #fff;
  }

  .bg-cover {
    width: 100%;
    min-height: 460px;
    background: url("../../assets/item-bg.png") no-repeat;
    box-sizing: border-box;
    padding: 1px;
    background-size: 100% 100%;
  }

  .bg-div {
    width: 800px;
    height: 300px;
    margin-top: 80px;
    margin-left: 20px;

    background: inherit;
    position: relative;
  }

  .bg-div:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(4px);
    z-index: 2;
  }

  .content {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    width: 100%;
    overflow: auto;
    height: 100%;
  }

  .title {
    font-weight: 600;
    font-size: 15px;
  }

  .demo-loadmore-list {
    min-height: 350px;
  }

  .item-row {
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    font-family: monospace;
  }
</style>